<template>
	<div class="popular_materials">
		<div class="search_text">实时热门视频素材</div>
		<div class="search_con">
			<a-input @change="handleInputChange" class="theme_color" v-model:value="keywords" placeholder="请输入搜索内容">
				<template #prefix>
					<search-outlined />
				</template>
			</a-input>
		</div>
		
		<div class="tab_con" v-if="tagList.length>0">
			<div v-show="expandAll || index<3" class="tab_item" @click="tabChange(index)" v-for="(item, index) in tagList" :key="index">
				<div :class="currentIndex == index?'active':''" class="tab_text">{{item.name}}</div>
				<div v-if="currentIndex == index" class="tab_icon"></div>
			</div>
			
			<div @click="expandClick" class="expand_con">{{expandAll?'收起':'展开'}}
				<DownOutlined v-if="!expandAll" />
				<UpOutlined v-else />
			</div>
		</div>
		
	</div>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import {
		SearchOutlined,
		DownOutlined,
		UpOutlined
	} from "@ant-design/icons-vue";

	export default defineComponent({
		emits: ['expandTab', 'chooseMaterial'],
		props: {
			tagList: {
				type: Array,
				default: ()=> {return []}
			}
		},
		components: {
			SearchOutlined,
			DownOutlined,
			UpOutlined
		},
		setup(props, context) {
			const state = reactive({
				keywords: '',
				currentIndex: 1,
				expandAll: false
			});

			const debounce = (func, wait = 2000, immediate = false) => {
				if (state.timeout !== null) clearTimeout(state.timeout);
				// 立即执行，此类情况一般用不到
				if (immediate) {
					typeof func === "function" && func();
				} else {
					// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
					state.timeout = setTimeout(function() {
						typeof func === "function" && func();
					}, wait);
				}
			};
			
			const tabChange = (index) => {
				if (state.currentIndex == index) return
				state.currentIndex = index
				context.emit('chooseMaterial', props.tagList[index])
			}
			
			const handleInputChange = (e) => {
				let params = {}
				Object.assign(params, props.tagList[state.currentIndex])
				params.material_name = state.keywords
				debounce(()=>{
					context.emit('chooseMaterial', params)
				})
			}
			
			const expandClick = () => {
				state.expandAll = !state.expandAll
				context.emit('expandTab', state.expandAll)
			}
			
			return {
				...toRefs(state),
				tabChange,
				handleInputChange,
				expandClick
			}
		},
	});
</script>

<style lang="less" scoped>
	
	.popular_materials{
		padding-top: 20px;
		.search_text {
			color: #ffffffd1;
			font-weight: bold;
			span {
				font-size: 12px;
			}
		}
		.search_con{
			.theme_color {
				width: 100%;
				color: #fff;
				background-color: #333;
				border: none;
				margin-top: 10px;
			
				&:hover {
					background-color: #333;
				}
			}
		}
		.tab_con {
			display: flex;
			margin-top: 15px;
			flex-wrap: wrap;
			transform: translateX(-20px);
			.tab_item {
				margin-left: 20px;
				height: 32px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				cursor: pointer;
				font-size: 14px;
		
				.tab_text {
					color: #eee;
		
					&.active {
						color: #2878FF;
					}
				}
		
				.tab_icon {
					width: 100%;
					height: 2px;
					background-color: #2878FF;
					margin-top: 5px;
				}
			}
			
			.expand_con{
				margin-left: 20px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				cursor: pointer;
				font-size: 14px;
				color: #fff;
				transform: translateY(-5px);
			}
		}
	}

	:deep(.ss-input) {
		background-color: #333 !important;
		color: #fff;
	}
</style>